<template>
    <div>
        <h2 style="margin-left: 450px;margin-top: 20px;">个人信息</h2>
    </div>
    <!-- <button @click="getData" style="margin-left: 300px;">getdata</button> -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      style="width: 500px;
      margin-top: 80px;
      margin-left: 210px;"
      
    >
    
      <el-form-item label="姓名：" prop="name" >
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="性别：" prop="sex" >
        <el-input v-model="ruleForm.sex" />
      </el-form-item>
      <el-form-item label="年龄：" prop="age" >
        <el-input v-model="ruleForm.age" />
      </el-form-item>
      <el-form-item label="级别：" prop="grade" >
        <el-input v-model="ruleForm.grade" />
      </el-form-item>
      <el-form-item label="院系：" prop="dept">
        <el-input v-model="ruleForm.dept" />
      </el-form-item>
 
     
      <el-form-item style="margin-top: 30px;margin-left: 70px;">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)" style="margin-left: 60px;">清空</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { useRoute } from 'vue-router'
import API from "../pluging/axiosInstance.js";

const route = useRoute()
const name = route.query.name
const id=route.query.id



  interface RuleForm {
    name: string
    dept:string
    sex: string
    grade:string
    age: string
  }
  
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: ''+name,
    sex: '',
    age: '',
    dept:'',
    grade:''
   
  })
  
  const personData = reactive({
    sex: "",
    age: '',
    grade: "",
    dept: "",});
//测试请求方法
function getData () {
   API({
    url: "/home/person",
    method: "get",
    data: {
      id:id+''
    },
  }).then((res) => {
    console.log(res.data)
    ruleForm.age = res.data.dataList[0].age;
    ruleForm.sex = res.data.dataList[0].sex;
    ruleForm.grade = res.data.dataList[0].grade;
    ruleForm.dept = res.data.dataList[0].dept;

    console.log("请求成功!" + "请求数据：");

    // console.log(loginData.id)
  });
};
getData()
function submitData () {
   API({
    url: "/home/person/submit",
    method: "post",
    data: {
      id:id+'',
      name:'',
      sex: '',
      age: '',
      dept:'',
      grade:''
    },
  }).then((res) => {
    console.log("请求成功!" + "保存成功");

    // console.log(loginData.id)
  });
};
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 2, max: 15, message: '请输入2-15个字符的正确用户名', trigger: 'blur' },
    ],
    dept: [
      { required: true, message: '请输入院系', trigger: 'blur' },
      { min: 3, max: 15, message: '请输入3-15个字符的正确院系', trigger: 'blur' },
    ],
    sex: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change',
      },
    ],
    grade: [
      {
        required: true,
        message: '请选择级别',
        trigger: 'change',
      },
    ],
    age: [
      {
        required: true,
        message: '请选择年龄',
        trigger: 'change',
      },
    ],
    
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
submitData
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  </script>
  